<!DOCTYPE html>
<html>
<head>
    <title>Beer</title>
    <style>
        img.imagen {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -189px;
            margin-left: -203px;
        }
        html {
            background:url("beer.jpg");
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
    <script type="application/x-javascript" src="web/src/main/javascript/libraries/jquery-2.0.3.js"></script>
    <script>
        $(document).ready(function() {
            $('.horiz').animate({width: '100%'}, 3000).animate({opacity: 0}, 3000);
            $('.ver').animate({height: '100%'}, 3000).animate({opacity: 0}, 3000);

            window.setTimeout(function(){
                $('img').animate({opacity: 1}, 3000);
            }, 3000);

        });


    </script>
</head>
<body style="background: #FFFF66">
<div class='horiz' style="opacity: 0.5; position: absolute; top: 5%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 10%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 15%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 20%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 25%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 30%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 30%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 35%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 40%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 45%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 50%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 55%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 60%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 65%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 70%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 75%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 80%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 85%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 90%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='horiz' style="opacity: 0.5; position: absolute; top: 95%; left: 0; width: 0; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>

<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 5%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 10%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 15%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 20%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 25%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 30%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 35%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 40%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 45%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 50%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 55%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 60%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 65%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 70%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 75%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 80%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 85%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 90%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<div class='ver' style="opacity: 0.5; position: absolute; top: 0; left: 95%; width: 4px; height: 4px; background-color: orange; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;"></div>
<a href="index.html">
    <img src="logo3.png"  style="border:3px double #000000; border-radius:25px;opacity: 0" alt="Logo" onclick="" class="imagen">
</a>
</body>
</html>